<template>
  <div class="SK-community-container SK-user-center-container">
    <div class="SK-community-content">
      <div class="SK-tabs-container">
        <div class="SK-tabs-buttons SK-left-menu-tabs-buttons">
          <div class="tabs-button first-title" @click="scene = 0">我的中心</div>
          <div class="tabs-button">
            <a :class="{ active: scene == 3 }" @click="scene = 3">我的游戏</a>
          </div>
          <div class="tabs-button">
            <a :class="{ active: scene == 2 }" @click="scene = 2">我的钱包</a>
          </div>
          <div class="tabs-button">
            <a :class="{ active: scene == 1 }" @click="scene = 1">基本信息</a>
          </div>
        </div>
        <div class="SK-tabs-content SK-user-center-tabs-content">
          <div class="SK-user-center-home-container" v-show="scene == 0">
            <div
              class="SK-user-center-home-content SK-user-center-info-container"
            >
              <div class="info-left">
                <img :src="userInfo.page" />
              </div>
              <div class="info-middle">
                <div class="middle-top">
                  <h1 title="sk_8a75ac69cfa1c739dd49">
                    {{ userInfo.name }}
                  </h1>
                </div>
              </div>
              <div class="info-right">
                <div class="right-top">
                  <a :class="{ active: scene == 1 }" @click="scene = 1"
                    ><i class="fa fa-pencil-square-o"></i
                    ><span>修改资料</span></a
                  >
                </div>
              </div>
            </div>

            <div
              class="SK-user-center-home-content SK-user-center-home-orders-content"
            >
              <div class="SK-title-block-container">
                <div class="SK-title-block-title">
                  <span>我的订单</span>
                </div>
                <div class="SK-title-block-content" v-if="myOrder == null">
                  <div class="empty-remind-word">最近没有下过订单~~</div>
                </div>
                <el-table :data="myOrder" style="width: 100%" v-else>
                  <el-table-column prop="id" label="订单编号" width="180">
                  </el-table-column>
                  <el-table-column prop="gamename" label="游戏名称" width="180">
                  </el-table-column>
                  <el-table-column prop="gamemoney" label="价格">
                  </el-table-column>
                  <el-table-column prop="time" label="购买时间">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div
              class="SK-user-center-home-content SK-user-center-home-orders-content SK-user-center-home-wishes-content"
            >
              <div class="SK-title-block-container">
                <div class="SK-title-block-title">
                  <span>心愿单&nbsp;&nbsp;点击跳转游戏详情</span>
                </div>
                <div class="SK-title-block-content" v-if="myWish == null">
                  <div class="empty-remind-word">这里空空如也~~</div>
                </div>
                <el-tag
                  v-else
                  v-for="(tag, index) in myWish"
                  :key="tag.id"
                  closable
                  style="margin: 10px"
                  type="success"
                  @click="goGameDetail(tag)"
                  @close="removeWish(tag)"
                >
                  {{ tag.gamename }}
                </el-tag>
              </div>
            </div>

            <div
              class="SK-user-center-home-content SK-user-center-home-orders-content SK-user-center-home-wishes-content"
            >
              <div class="SK-title-block-container">
                <div class="SK-title-block-title">
                  <span>我的发帖&nbsp;&nbsp>点击查看原帖</span>
                </div>
                <div class="SK-title-block-content" v-if="myPost == null">
                  <div class="empty-remind-word">这里空空如也~~</div>
                </div>
                <div
                  v-else
                  class="SK-community-post-detail"
                  v-for="(post, index) in myPost"
                  :key="post.id"
                >
                  <div class="item-wrap" id="scroll_top_638036">
                    <div class="header"><div class="btn"></div></div>
                    <div class="from-header">
                      <span class="personal-time">{{ post.content_time }}</span>
                    </div>
                    <h1 @click="godetailPost(post)">{{ post.content_post }}</h1>
                    <img
                      :src="post.url"
                      class="post_img"
                      style="width: 100px; height: 100px"
                    />
                    <h1
                      style="border-bottom: 1px solid rgba(255, 255, 255, 0.6)"
                    ></h1>
                  </div>
                  <div class="tags"></div>
                </div>
              </div>
            </div>

            <div
              class="SK-user-center-home-content SK-user-center-home-orders-content SK-user-center-home-wishes-content"
            >
              <div class="SK-title-block-container">
                <div class="SK-title-block-title">
                  <span>我的跟帖&nbsp;&nbsp>点击评论 可查看原帖</span>
                </div>
                <div class="SK-title-block-content" v-if="myComment == null">
                  <div class="empty-remind-word">这里空空如也~~</div>
                </div>
                <div
                  V-else
                  class="SK-community-post-detail"
                  v-for="(comment, index) in myComment"
                  :key="comment.id"
                >
                  <div class="item-wrap" id="scroll_top_638036">
                    <div class="header"><div class="btn"></div></div>
                    <div class="from-header">
                      <a class="personal-time" @click="deleteComment(comment)"
                        >&nbsp;&nbsp;删除</a
                      ><span class="personal-time">{{
                        comment.follow_content_time
                      }}</span>
                    </div>
                    <h1
                      @click="godetailPost2(comment)"
                      style="border-bottom: 1px solid rgba(255, 255, 255, 0.6)"
                    >
                      {{ comment.follow_content_post }}
                    </h1>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <Info v-show="scene == 1"></Info>
          <Wallet v-show="scene == 2"></Wallet>
          <MyGame v-show="scene == 3"></MyGame>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Info from "./Info";
import Wallet from "./Wallet";
import MyGame from "./MyGame";
import pic from "../../assets/images/default.jpeg";
import { reqRemoveWish } from "@/api";
import { mapState } from "vuex";
export default {
  name: "Center",
  data() {
    return {
      scene: 0,
      pic,
      flag: 0,
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },
    };
  },
  mounted() {
    this.getUserInfo();
    this.getMyContent();
    this.getMyComment();
    this.getMyOrder();
    this.getMyWish();
  },
  methods: {
    async getUserInfo() {
      //   this.pic = require("@/asset/image/default.jpeg");
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (this.userInfo.page == null) {
        this.userInfo.page = pic;
      }
    },
    async getMyContent() {
      try {
        await this.$store.dispatch("getMyPost", this.userInfo.name);
      } catch (error) {
        alert(error.message);
      }
    },
    async getMyComment() {
      try {
        await this.$store.dispatch("getMyComment", this.userInfo.name);
      } catch (error) {
        alert(error.message);
      }
    },
    async getMyWish() {
      try {
        let result = await this.$store.dispatch(
          "getWishList",
          this.userInfo.name
        );
      } catch (error) {
        alert(error.message);
      }
    },
    changeFlag1() {
      this.flag = 0;
    },
    changeFlag2() {
      this.flag = 1;
    },
    godetailPost(post) {
      this.$router.push({
        path: "/postdetail",
        query: { contentid: post.id, username: this.userInfo.name },
      });
    },
    godetailPost2(comment) {
      this.$router.push({
        path: "/postdetail",
        query: { contentid: comment.content_id, username: this.userInfo.name },
      });
    },
    // 删除评论
    async deleteComment(comment) {
      try {
        await this.$store.dispatch("deleteMyComment", comment.id);
        this.$message.success("删评成功");
        this.getMyComment();
      } catch (error) {
        alert(error.message);
      }
    },
    // 获取我的订单
    async getMyOrder() {
      try {
        await this.$store.dispatch("getOrder", this.userInfo.name);
      } catch (error) {
        alert(error.message);
      }
    },
    goGameDetail(tag) {
      this.$router.push({
        path: "/detail",
        query: { gamename: tag.gamename },
      });
    },
    // 移出愿望单
    async removeWish(tag) {
      let id = tag.id;
      let res = await reqRemoveWish({ id });
      if (res.code == 200) {
        this.$message.success("移除成功");
        this.getMyWish();
      }
    },
  },
  components: {
    Info,
    Wallet,
    MyGame,
  },
  computed: {
    ...mapState({
      myPost: (state) => state.user.myPost || [],
      myComment: (state) => state.user.myComment || [],
      myOrder: (state) => state.user.myOrder || [],
      myWish: (state) => state.user.myWish || [],
    }),
  },
};
</script>

<style>
@import "../../assets/css/center.css";
</style>
